<template>
	<view class="rechargejil">
		<!-- <u-navbar :border-bottom="false" title-size="35" title="充值记录"></u-navbar> -->
		<u-tabs :list="list" active-color="#b78c3d" :is-scroll="false" :current="current" @change="change123"></u-tabs>
		<ul v-if="listItem.length>0">
			<li v-for="(item,index) in listItem" :key="index">
				<view>
					<text>{{item.memo}}</text>
					<text>{{item.createtime | time}}</text>
				</view>
				<view v-if="current!=1">{{item.money}}</view>
				<view v-if="current==1">{{item.score}}</view>
			</li>
		</ul>
		<view class="kong" v-else>
			<image src="@/static/my/page.png"></image>
		</view>
	</view>
</template>

<script>
	import {
		moneyList
	} from '@/network/api.js'
	export default {
		data() {
			return {
				list: [{
					name: '金币'
				}, {
					name: '消费积分'
				}, {
					name: '企业产权'
				}, {
					name: '健康值'
				}],
				current: 0,
				page: 1,
				listItem: []
			}
		},
		created() {
			this.moneyListRe()
		},
		//触底函数
		onReachBottom() {
			this.page += 1
			this.moneyListRe()
		},
		filters: {
			time(e) {
				const timestamp = e * 1000; // 时间戳 2021-01-01 00:00:00
				const date = new Date(timestamp); // 将时间戳转换为 Date 对象
				const year = date.getFullYear(); // 获取年份
				const month = date.getMonth() + 1; // 获取月份（注意加一）
				const day = date.getDate(); // 获取日期
				const hour = date.getHours(); // 获取小时
				const minute = date.getMinutes(); // 获取分钟
				const second = date.getSeconds(); // 获取秒数
				const formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`; //拼接成格式化后的日期字符串
				return formattedDate
			}
		},
		methods: {
			change123(index) {
				this.current = index;
				this.page = 1
				this.listItem = []
				this.moneyListRe()
			},
			moneyListRe() {
				let data = {
					type: this.current,
					page: this.page,
					pagesize: 15
				}
				moneyList(data).then(res => {
					if (res.code == 1) {
						if (this.page == 1) {
							this.listItem = res.data.data
						} else {
							this.listItem = [...this.listItem, ...res.data.data]
						}

					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.rechargejil {
		background-color: #f3f3f3;
		
		.kong {
			height: 100vh;
			text-align: center;
			>image {
				width: 300rpx;
				height: 300rpx;
				margin-top:300rpx;
			}
		}

		>ul {
			margin-top: 20rpx;
			background-color: #fff;

			>li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 120rpx;
				padding: 30rpx 30rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #DCDCDC;

				>view:nth-child(1) {
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Medium;

					>text:nth-child(1) {
						display: block;
						width: 490rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					>text:nth-child(2) {
						display: block;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						color: #666666;
					}
				}

				>view:nth-child(2) {
					// width:300rpx;
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Medium;
				}
			}

			// >li:last-child {
			// 	border: none
			// }
		}
	}
</style>